import React, { useState } from 'react';
import {
  UserOutlined,
  LogoutOutlined,
  HomeOutlined,
  CalendarOutlined,
  WalletOutlined,
  FileTextOutlined,
  ClockCircleOutlined,
  ArrowRightOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Button, Toast, Avatar, List, Badge } from 'antd-mobile';
import './index.css';

// 功能列表
const functionList = [
  {
    icon: <CalendarOutlined className="func-icon" />,
    title: "预约记录",
    badge: 3,
    action: 'appointments'
  },
  {
    icon: <WalletOutlined className="func-icon" />,
    title: "我的钱包",
    subTitle: "¥1,258.00",
    action: 'wallet'
  }
];

// 预约记录数据
const appointmentData = [
  {
    id: 1,
    date: "05月25日 14:30",
    service: "全身经络调理 - 60分钟",
    therapist: "李医师",
    status: "已完成"
  },
  {
    id: 2,
    date: "05月20日 10:00",
    service: "针灸理疗 - 45分钟",
    therapist: "王医师",
    status: "已完成"
  },
  {
    id: 3,
    date: "05月18日 16:00",
    service: "艾灸养生 - 30分钟",
    therapist: "张医师",
    status: "已取消"
  }
];

const Me = () => {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState({
    name: "张先生",
    avatar: '/public/头像.jpg',
    phone: "138****5678",
    memberLevel: "会员",
  });

  // 处理功能列表点击事件
  const handleFunctionClick = (action) => {
    switch(action) {
      case 'appointments':
        navigate('/appointments'); // 跳转到预约记录页面
        break;
      case 'wallet':
        navigate('/wallet'); // 跳转到钱包页面
        break;
      default:
        break;
    }
  };

  // 查看全部预约记录
  const viewAllAppointments = () => {
    navigate('/order/0');
  };

  // 查看钱包明细
  const viewWalletDetails = () => {
    navigate('/wallet/details');
  };

  const handleLogout = () => {
    Toast.show("退出登录成功");
    // 在实际应用中，这里会执行退出登录的逻辑
    // navigate('/login');
  };

  // 状态样式映射
  const statusStyle = (status) => {
    switch(status) {
      case '已完成':
        return { backgroundColor: "#e8f5e9", color: "#4caf50" };
      case '已取消':
        return { backgroundColor: "#ffebee", color: "#f44336" };
      case '待确认':
        return { backgroundColor: "#fff8e1", color: "#ff9800" };
      default:
        return { backgroundColor: "#f8f4e9", color: "#a53f2b" };
    }
  };

  return (
    <div className="profile-page">
      {/* 头部用户信息 */}
      <header className="profile-header">
        <div className="user-info">
          <div className="avatar-container">
            {userInfo.avatar ? (
              <Avatar src={userInfo.avatar}  className="user-avatar" />
            ) : (
              <div className="user-avatar-default">
                <UserOutlined />
              </div>
            )}
          </div>
          <div className="user-meta">
            <div className="user-name-row">
              <span className="user-name">{userInfo.name}</span>
              <span className="member-level">{userInfo.memberLevel}</span>
            </div>
            <span className="user-phone">{userInfo.phone}</span>
          </div>
        </div>
      </header>

      {/* 钱包信息卡片 */}
      <div className="wallet-card">
        <div className="card-header">
          <div className="card-title">
            <WalletOutlined />
            <span>我的钱包</span>
          </div>
          <span className="view-details" onClick={viewWalletDetails}>
            查看明细
          </span>
        </div>
        <div className="wallet-balance">
          <div className="balance-label">账户余额 (元)</div>
          <div className="balance-amount">1,258.00</div>
        </div>
        <div className="wallet-summary">
          <div className="summary-item">
            <div className="summary-value">12</div>
            <div className="summary-label">累计消费</div>
          </div>
          <div className="summary-item">
            <div className="summary-value">8</div>
            <div className="summary-label">本月消费</div>
          </div>
          <div className="summary-item">
            <div className="summary-value">386</div>
            <div className="summary-label">剩余积分</div>
          </div>
        </div>
      </div>

      {/* 预约记录卡片 */}
      <div className="appointment-card">
        <div className="card-header">
          <div className="card-title">
            <FileTextOutlined />
            <span>预约记录</span>
          </div>
          <span className="view-all" onClick={viewAllAppointments}>
            查看全部
          </span>
        </div>
        <div className="appointment-list">
          {appointmentData.map((item) => (
            <div key={item.id} className="appointment-item">
              <div className="appointment-info">
                <div className="appointment-date">{item.date}</div>
                <div className="appointment-service">{item.service}</div>
                <div className="appointment-therapist">{item.therapist}</div>
              </div>
              <div 
                className="appointment-status"
                style={statusStyle(item.status)}
              >
                {item.status}
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* 退出登录按钮 */}
      <div className="logout-section">
        <button 
          className="logout-btn"
          onClick={handleLogout}
        >
          <LogoutOutlined className="logout-icon" />
          退出登录
        </button>
      </div>

    </div>
  );
};

export default Me;
